<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:400px;line-height:100px;font-size:30px;text-align:center;margin: 0 auto;}
        #btn{font-size: 20px;display: block;margin: 0 auto;width:120px;}
    </style>
</head>
<body>
    <div class="box">点击按钮，开始点名</div>
    <input type="button" value="开始点名" id="btn">
    <dl class="list">
        <dt>本次已点：<span class="count">0</span>位</dt>
    </dl>
</body>
<script>

    var str = "尤志轩，万雨翀，卢惠嫦，柳梦蝶，吴志明，余文强，张瑜，李婷婷，相欣欣，葛一丁，李文艳，吴彦栋，李子舰，陈艳竹，邹雨楉，程帅，张立国，位江波，曾桂平，李艳霞，闵亮，智超，于沐言，张向阳，郑梅玲，马文彪，柴林超，张佳敏，郑强宝，李飞，邓蓉，杨玲，贺大鹏，张硕，谷静杰，马文昌，米豪，储玉莹，李茂志，杜亚晨，夏琴，陈绍楠，方祖全，王圆振，查国航，叶晓鹏，李绍坤，毛柏程，张皖";

    var arr = str.split("，");
    console.log(arr);

    // 点击开始按钮，名字开始快速轮换
    // 再点按钮，停止，确定当前名字
    // 记录到列表，统计已点击次数
    // 显示到页面

    // 1. 选择元素
    var box = document.querySelector(".box");
    var btn = document.getElementById("btn");
    var list = document.getElementsByClassName("list")[0];
    var count = document.querySelector(".count");

    // 6. 提前准备一个变量，用于区分当前状态
    var flag = 0;

    var t = null;

    // 11. 准备记录点名的次数
    var num= 0;

    var name = "";
    var color = "";

    // 2. 添加点击事件
    btn.onclick = function(){
        // 7. 根据状态，决定执行的功能
        if(flag === 0){
            // 3. 清除可能会存在的历史计时器
            clearInterval(t);
            // 4. 开启计时器
            t = setInterval(function(){
                // 5. 生成随机索引，取随机数据
                name = arr[random(0, arr.length-1)]
                box.innerHTML = name;
                color = randomRGB();
                box.style.background = color;
            }, 50);
            // 8. 当前功能执行完毕后，将状态调整为下次的功能状态
            flag = 1;
            btn.value = "暂停";
        }else if(flag === 1){
            // 9. 停止计时器
            clearInterval(t);
            // 12. 每确定一个名字，记录一次，设置到容器
            count.innerText = ++num;
            // 13. 创建元素，存放点到的名字
            var dd = document.createElement("dd");
            dd.innerHTML = name;
            dd.style.background = color;
            list.appendChild(dd);
            // 10. 当前功能执行完毕后，将状态调整为下次的功能状态
            flag = 0;
            btn.value = "继续";
        }
    }

    function randomRGB(){
        return "rgb("+ random(150,200) +","+ random(150,200) +","+ random(150,200) +")"
    }


    function random(max,min){
        return Math.round(Math.random() * (max-min) + min);
    }

    
</script>
</html>